<template>
	<div class="padding-lr-xs">
	  <a-form-model :model="processData">
<!--      <a-form-model-item-->
<!--          :labelCol="labelCol"-->
<!--          :wrapperCol="wrapperCol"-->
<!--          label="图标"-->
<!--      >-->
<!--        <a-input-->
<!--            v-model="processData.id"-->
<!--            @change="-->
<!--	          (e) => {-->
<!--	            updateId(e.target.value);-->
<!--	          }-->
<!--	        "-->
<!--            :disabled="isEdit"-->
<!--        ></a-input>-->
<!--      </a-form-model-item>-->
	    <a-form-model-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="流程标识"
			>
	      <a-input
	        v-model="processData.id"
	        @change="
	          (e) => {
	            updateId(e.target.value);
	          }
	        "
	        :disabled="isEdit"
	      ></a-input>
	    </a-form-model-item>
	    <a-form-model-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="流程名称"
			>
	      <a-input
	        v-model="processData.name"
	        :disabled="isEdit"
	        @change="
	          (e) => {
	            updateName(e.target.value);
	          }
	        "
	      >
	      </a-input>
	    </a-form-model-item>
	    <a-form-model-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="流程描述"
			>
	      <a-textarea
	        v-model="processData.description"
			placeholder="请输入描述"
	        @change="
	          (e) => {
	            updateDesc(e.target.value);
	          }
	        "
	      ></a-textarea>
	    </a-form-model-item>
			
			<a-form-model-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
			>
				<span slot="label">
					执行监听器
					<a-tooltip placement="left">
						<template slot="title">
							在流程执行过程中，监听流程实例的生命周期事件，如创建、启动、完成等。可以在这些事件发生时执行自定义的逻辑操作。
						</template>
						<a-icon type="question-circle" />
					</a-tooltip>
				</span>
			  <a-button type="primary" size="small" @click="showExecute(1)"
			    >编辑</a-button
			  >
			</a-form-model-item>
			
		<a-form-model-item
			:labelCol="labelCol"
			:wrapperCol="wrapperCol"
		>
			<span slot="label">
				批量审批
				<a-tooltip placement="left">
					<template slot="title">
						开启后可以批量审批该流程
					</template>
					<a-icon type="question-circle" />
				</a-tooltip>
			</span>
			<a-switch
				:checked="processData.batchApproval === '1'"
				checked-children="开"
				un-checked-children="关"
				@change="batchApproval"
			/>
		</a-form-model-item>
		
		<!-- <a-form-model-item
			:labelCol="labelCol"
			:wrapperCol="wrapperCol"
		>
			<span slot="label">
				是否多表单
				<a-tooltip placement="left">
					<template slot="title">
						开启后可以在当前流程不同节点使用不同表单
					</template>
					<a-icon type="question-circle" />
				</a-tooltip>
			</span>
			<a-switch
				:checked="processData.ifMultiForm === '1'"
				checked-children="开"
				un-checked-children="关"
				@change="ifMultiForm"
			/>
		</a-form-model-item> -->
	  </a-form-model>
		
		<!-- 监听器 -->
		<execute-property-panel
		  ref="execute"
		  :visible="visible"
		  :type="type"
		  :loading="confirmLoading"
		  :model="mdl"
		  @cancel="handleCancel"
		  :executionListener="executionListener"
		  :taskListener="taskListener"
		  @addExecute="addExecute"
		></execute-property-panel>
		
	</div>
</template>

<script>
	import ExecutePropertyPanel from "./executePropertyPanel.vue"
	export default {
	  name: "BasicConfig",
		components: {
			ExecutePropertyPanel
		},
	  data() {
	    return {
	      labelCol: {
	      	xs: {
	      		span: 24,
	      	},
	      	sm: {
	      		span: 6,
	      	},
	      },
	      wrapperCol: {
	      	xs: {
	      		span: 24,
	      	},
	      	sm: {
	      		span: 18,
	      	},
	      },
				visible: false,
				type: 0,
				confirmLoading: false,
				mdl: null,
				executionListener:[],
				taskListener:[],
				
			}
		},
		props: {
			formData: {
				type: Object,
				require: true
			},
			processData: {
			  type: Object,
			  required: true,
			},
		  isEdit: {
		    type: Boolean,
		  },
			modeler: {
			  type: Object,
			  required: true,
			},
			element: {
			  type: Object,
			  required: true,
			}
		},
		methods:{
			updateProperties(properties) {
			  this.modeler.get("modeling").updateProperties(this.element, properties);
			},
			// 批量审批
			batchApproval(val) {
				this.processData.batchApproval = val === true ? '1' : '0';
				this.updateProperties({ batchApproval: val === true ? '1' : '0' });
			},
			// 是否多表单
			ifMultiForm(val) {
				this.processData.ifMultiForm = val === true ? '1' : '0';
				this.updateProperties({ ifMultiForm: val === true ? '1' : '0' });
			},
			// 流程id
			updateId(val) {
				this.processData.key = val;
			  this.updateProperties({ id: val });
			},
			// 流程名称
			updateName(val) {
				this.updateProperties({ name: val });
			},
			// 描述
			updateDesc(val) {
			  let doc = this.modeler
			    .get("bpmnFactory")
			    .create("bpmn:Documentation", { text: val });
			  this.updateProperties({ documentation: [doc] });
			},
			// 监听器
			addExecute(e, type) {
				if (e?.length) {
					let extensionElements = this.element.businessObject.get('extensionElements')
					if (!extensionElements) {
						extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
					}
					// 清除旧值
					if (type === 1) {
						extensionElements.values = extensionElements.values?.filter(item => item.$type !==
							'flowable:ExecutionListener')
					} else {
						extensionElements.values = extensionElements.values?.filter(item => item.$type !==
							'flowable:TaskListener')
					}
					e.forEach(item => {
						let executionListener = ''
						if (type === 1) {
							executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
						} else {
							executionListener = this.modeler.get('moddle').create('flowable:TaskListener')
						}
						executionListener['event'] = item.event
						executionListener[item.type] = item.className
						if (item.params && item.params.length) {
							item.params.forEach(field => {
								const fieldElement = this.modeler.get('moddle').create('flowable:Field')
								fieldElement['name'] = field.name
								fieldElement[field.type] = field.value
								// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
								// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: `<![CDATA[${field.value}]]>` })
								// fieldElement[field.type] = valueElement
			 				executionListener.get('fields').push(fieldElement)
							})
						}
						extensionElements.get('values').push(executionListener)
					})
					this.updateProperties({
						extensionElements: extensionElements
					})
				} else {
					const extensionElements = this.element.businessObject[`extensionElements`]
					if (extensionElements) {
						if (type === 1) {
							extensionElements.values = extensionElements.values?.filter(item => item.$type !==
								'flowable:ExecutionListener')
						} else {
							extensionElements.values = extensionElements.values?.filter(item => item.$type !==
								'flowable:TaskListener')
						}
					}
				}
				this.visible = false
			},
			showExecute(e) {
			  this.visible = true
			  this.$refs.execute.getData(e)
			},
			handleCancel() {
			  this.visible = false
			},
		}
	}
</script>

<style>
</style>
